<template>
  <div class="OrderListDetail">
    <div class="OrderListDetail-one">
      <div class="OrderListDetail-one-title">运营订单</div>
      <div class="OrderListDetail-one-flex" v-if="id">
        <!-- <div>
            订单类型：<span>翻单</span>
        </div> -->
        <!-- <div>
            内部交期：<span>翻单</span>
        </div> -->
        <div>
          数量：<span>{{ detaildata.count }}</span>
        </div>
        <div>
          实际数量：<span>{{ detaildata.real_count }}</span>
        </div>
        <!-- <div>
            总价：<span>翻单</span>
        </div> -->
      </div>
    </div>

    <div
      class="OrderListDetail-bottom"
      :style="{ height: 'calc(100vh - ' + height + 'px' + ')' }"
    >
      <div
        class="OrderListDetail-bottom-line pointer"
        @click="clickHeight"
        draggable
        @dragover.prevent
        @drag="drag($event)"
        @dragend="dragEnterOver($event)"
      >
        <i class="el-icon-caret-top"></i>
        <div></div>
      </div>
      <div class="OrderListDetail-bottom-tabs">
        <el-tabs
          type="card"
          v-model="editableTabsValue"
          @tab-click="handleClick"
        >
          <el-tab-pane label="数量" name="1">
            <div
              v-if="tabName == 1"
              class="myscroll"
              :style="{ height: 'calc(100vh - ' + heightTop + 'px' + ')' }"
            >
              <number
                v-if="id"
                @ondetaildata="ondetaildata"
                :id="id"
                :isEdit="isEdit"
                ref="numberedit"
              ></number>
              <numberNew v-else></numberNew>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
  
<script>
import {} from "@/api";
import number from "./components/number.vue";
import numberNew from "./components/numberNew.vue";
export default {
  components: { number, numberNew },
  filters: {
    statetext(e) {
      if (e == 0) return "未确认";
      if (e == 1) return "设计确认";
      if (e == 2) return "技术确认";
      if (e == 3) return "生产确认";
    },
    timestampToTime(e) {
      return timestampToTime(e);
    },
  },
  data() {
    return {
      loading: false,
      editableTabsValue: "1",
      dialogVisible: false,
      dialogVisibleSize: false,
      height: 180,
      heightTop: 420,
      isEdit: false,
      top: 0,
      tabName: 1,
      isClick: "",
      id: "",
      detail: "",
      detaildata: {},
      windowHeight: document.documentElement.clientHeight,
      tabHeight: 0,
    };
  },
  watch: {
    windowHeight(val) {
      let that = this;
      that.windowHeight = val;
      let { heightTop, windowHeight } = this;
      this.tabHeight = windowHeight - heightTop;
    },
    heightTop(val) {
      let that = this;
      let { heightTop, windowHeight } = this;
      this.tabHeight = windowHeight - heightTop;
    },
  },

  async activated() {
    let isEdit = await this.$route.params.isEdit;

    if (!isEdit) {
      this.isEdit = false;
    } else {
      this.isEdit = true;
    }
    let id = this.$route.query.id;
    if (!id) {
      this.id = "";
    } else {
      this.id = id;
    }
    console.log('this.id',this.id);
    if (this.tabName == 1) {
      let { heightTop, windowHeight } = this;
      console.log(windowHeight);
      this.tabHeight = windowHeight - heightTop;
      if (id) {
        setTimeout(() => {
          this.$refs.numberedit.sing();
        }, 500);
        
      }
    } else {
      let obj = {
        name: this.tabName,
      };
      this.handleClick(obj);
    }
  },
  methods: {
    ondetaildata(data) {
      this.detaildata = data;
    },
    // tab事件
    async handleClick(tab, event) {
      let { heightTop, windowHeight } = this;
      this.tabHeight = windowHeight - heightTop;
      if (tab.name == 1) {
      }

      this.tabName = tab.name;
    },

    clickHeight(e) {
      let { height } = this;
      if (height > 340) {
        let y = e.clientY - 340;
        this.height = 340;
        this.heightTop = 340 + 70;
      }
      if (height <= 340) {
        let y = e.clientY - 340;
        this.height = 150;
        this.heightTop = 150 + 70;
      }
      if (height <= 150) {
        let y = e.clientY - 340;
        this.height = 340;
        this.heightTop = 340 + 70;
      }
    },
    // 点击事件
    onClick(e) {
      this.isClick = e;
    },

    drag(e) {
      this.top = e.clientY;
    },
    async postAdminCodeGetTag() {
      let type_no = this.type_no;
      let obj = {
        type_no,
        page: 1,
        size: 10000,
      };
      let res = await postAdminCodeGetTag(obj);

      let tableData = res.data.filter((item) => {
        return item.safety_category || item.executive_standard;
      });
      this.tableData = tableData;
    },
    dragEnterOver(e) {
      this.height = e.clientY;
      this.heightTop = e.clientY + 70;
    },
  },
};
</script>
  
<style lang="scss" scoped>
page {
  font-size: 14px;
}
.editlook {
  color: #2c70d6;
  font-size: 12px;
  border: 1px solid rgba($color: #2c70d6, $alpha: 0.3);
  background: rgba($color: #2c70d6, $alpha: 0.1);
  border-radius: 3px;
  width: 60px;
  height: 26px;
  line-height: 24px;
  text-align: center;
}
.myscroll {
  overflow-y: scroll;
  overflow-x: hidden;
}
.myscroll::-webkit-scrollbar {
  display: none;
} // 隐藏滚动条
.OrderListDetail {
  .OrderListDetail-one {
    background: #fff;
    padding: 10px;
    .OrderListDetail-one-title {
      font-weight: 600;
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
    }
    .OrderListDetail-one-flex {
      padding: 20px 0;
      display: flex;
      > div {
        margin-right: 60px;
      }
    }
  }
  .OrderListDetail-bottom {
    // width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 10;

    .OrderListDetail-bottom-tabs {
      /deep/.el-tabs__item.is-active {
        color: #fff;
        background: #2c70d6;
      }
      border-top: 1px solid #f0f1f7;
      //   border-radius: 8px;
      //   padding: 20px;
      width: calc(100vw - 62px);
      background: #fff;
      height: calc(100% - 16px);
    }
    .OrderListDetail-bottom-line {
      cursor: row-resize;
      height: 8px;
      background: #dddddd;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      font-size: 10px;
      > div {
        background: #000;
        height: 2px;
        width: 30px;
        border-radius: 4px;
      }
    }
  }
}
</style>